/* 排灌站信息 弹框
* @ 劳兆城
* @ 2017-08-12*/

<template>
	<interact-model
		ref="interact-model"
		title="水文断面线信息"
		class="drainStation-model">
		<div class="drainStation-warpper">
			<div class="drainStation-table">
				<div class="table">
            <div v-for="(value, key, index) in gateInfo">
              <div>{{key}}</div>
              <div>{{value}}</div>
            </div>
        </div>
			</div>
		</div>
	</interact-model>
</template>

<script>
	import {
		interactModelMixin,
		aPictureModelMixin
	} from 'common/js/mixins'

export default {
		mixins: [
			interactModelMixin,
			aPictureModelMixin
    ],
    data () {
      return {
        gateInfo: {}
      }
    },
		methods: {
			show (feature, layerNames) {
        this.$refs['interact-model'].showModel()
        let obj = feature.getProperties() || {}
        delete obj.geometry
        this.gateInfo = obj
        console.log(this.gateInfo)
			}
		}
	}
</script>

<style lang="scss">
	.drainStation-model {
		width: 450px;
		height: 300px;
		.drainStation-warpper {
			width: 100%;
			height: 100%;
			position: relative;
			padding: 5px;
			.drainStation-table {
				width: 100%;
				height: 100%;
				.table {
          width: 100%;
          margin: auto;
          font-size: 14px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          > div{
            border: 1px solid #ccc;
            width: 50%;
            display: flex;
            align-items: center;
            > div{
              width: 50%;
              padding: 5px;
              &:nth-of-type(odd){
                border-right: 1px solid #ccc;
              }
            }
          }
        }
			}
		}
	}
</style>
